import { LanguageTypeString, QuestionType } from '@/components/question/typing';
import { Space } from 'ant-design-vue';
import { defineComponent, PropType, ref } from 'vue';
import QuestionDisplaySetting from './question-display-setting';
import QuestionJumpSetting from './question-jump-setting';

export default defineComponent({
  props: {
    question: {
      type: Object as PropType<QuestionType>,
    },
    language: {
      type: String as PropType<LanguageTypeString>,
      required: true,
    },
  },
  setup(props) {
    const { question, language } = props;
    const questionDisplaySettingOpen = ref(false);
    const questionJumpLogicOpen = ref(false);
    const questionAssociation = ref(false);
    const displayJumpLogic = ref(false);
    if (['single', 'scale'].includes(question!.type)) {
      displayJumpLogic.value = true;
    }
    return () => {
      return (
        <>
          <Space size="small">
            <a onClick={() => (questionDisplaySettingOpen.value = true)}>题目展示设置</a>
            {displayJumpLogic.value ? (
              <a onClick={() => (questionJumpLogicOpen.value = true)}>跳题逻辑</a>
            ) : (
              ''
            )}

            <a onClick={() => (questionAssociation.value = true)}>题目关联</a>
          </Space>
          <QuestionDisplaySetting
            key={`question-display-setting-${question?.id}-${questionDisplaySettingOpen.value}`}
            v-model:open={questionDisplaySettingOpen.value}
            width={'80%'}
            question={question}
            language={language}
          />
          {displayJumpLogic.value ? (
            <QuestionJumpSetting
              key={`question-jump-setting-${question?.id}-${questionJumpLogicOpen.value}`}
              v-model:open={questionJumpLogicOpen.value}
              width={'80%'}
              question={question}
              language={language}
            />
          ) : (
            ''
          )}
        </>
      );
    };
  },
});
